<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 引入通用头部 -->
<jsp:include page="/wm/common/head.jsp">
	<jsp:param name="title" value="客服沟通"/>
</jsp:include>
<script src="https://res.weiunity.com/msg/msg.js"></script>
<script src="https://res.weiunity.com/kefu/kefu.js"></script>
<script src="/plugin/videoCall/js/kefujs_extend_videoCall.js"></script>

 
<script type="text/javascript">

/****** chatQuickButton插件 ******/
kefu.extend.chatQuickButton = {
	css:'https://res.weiunity.com/kefu/extend/chatQuickButton/style.css',
	//进入chat一对一聊天窗口时，自动执行这个方法初始化
	initChat:function(){
		var chatQuickButtonHtml = `
				<section id="quickButton">
				    <button onclick="window.location.href='/zixun/user/index/selectKefu.do';">切换部门</button>
				    <button onclick="msg.info('开发中');">远程协助</button>
				    <button onclick="kefu.extend['videoCall'].onclick();">发起视频咨询</button>
				</section>
			`;
		document.getElementById('chat_footer').innerHTML = chatQuickButtonHtml+document.getElementById('chat_footer').innerHTML;
	}
}
/****** chatQuickButton插件结束 ******/

/****** 文件插件 ******/
kefu.extend.file = {
	name:'文件',
	icon:'<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1619840321163" class="icon" viewBox="0 0 1127 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4177" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M989.541 940.667h-858.923c0 0-68.409 10.642-68.409-80.572v-737.306c0 0 1.521-82.091 85.132-82.091h301.003c0 0 36.486-7.601 66.89 39.525 28.884 45.607 45.607 74.491 45.607 74.491 0 0 10.642 12.161 34.965 12.161-21.283 0 387.655 0 387.655 0 0 0 68.409-7.601 68.409 68.409v629.371c0 0 10.642 76.012-62.33 76.012zM925.692 362.984c0-18.243-15.202-33.445-33.445-33.445h-668.896c-19.763 0-34.965 15.203-34.965 33.445v3.040c0 19.763 15.202 34.965 34.965 34.965h668.896c18.243 0 33.445-15.203 33.445-34.965v-3.040z" fill="{color}" p-id="4178"></path></svg>',
	onclick:function(){
		//msg.info('开发中');
		var message = {
			token:kefu.token.get(),
			receiveId:'',
			sendId:kefu.user.id,
			type:'EXTEND',
			time:new Date().getTime(),
			extend:{
				'name':'CURRENT_ZUOXI_LIST',
				'kefuChatid':'kefuchatid_7fce7dfd06a8464fbd5d80abfc103565'
			}
		};
		
		kefu.socket.send(JSON.stringify(message));
	},
	format:function(message){
		console.log('----format:'+message);
	}
}
/****** 文件插件结束 ******/


/*** 设置左上角返回按钮 ***/
kefu.ui.list.entry = function(){
	window.location.href='/zixun/user/index/selectKefu.do';
}



//重写socket的消息接收
var oldSocketOnMessage = kefu.socket.onmessage;
kefu.socket.onmessage = function(res){
	var messageJson = JSON.parse(res.data);
	if(messageJson.type == 'EXTEND' && messageJson.extend.name == 'CURRENT_ZUOXI_LIST'){
		//获取坐席列表
		for(var i=0;i<messageJson.extend.list.length;i++){
			console.log(messageJson.extend.list[i]);
		}
		
		return;
	}
	
	if(messageJson.type == 'MSG'){
		//如果是普通的沟通消息，那么打开聊天窗口
		if(kefu.currentPage != 'chat'){
			kefu.ui.chat.entry('{zuoxiid}');
		}
	}
	oldSocketOnMessage(res);
}


kefu.api.domain = '${api}';	
//设置您的雷鸣云客服系统部署的socket聊天的wss或者ws的地址
kefu.socket.url = '${socket}';


//kefu.js 初始化
kefu.init();

//免得空指针
kefu.chat.otherUser = {id:1};

//填写上你的坐席id即可（在客服管理后台获得）。打开聊天窗口，其实就是这一句。
//kefu.ui.chat.entry("9752d379cbe641039de8c68974319bb9");
kefu.ui.chat.entry("kefuchatid_7fce7dfd06a8464fbd5d80abfc103565");
</script>



<link rel="stylesheet" type="text/css" href="https://res.weiunity.com/kefu/css/style.css" >
<style>
#quickButton{
    bottom: 5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
    overflow:scroll;
	margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    background: var(--background-color);
    display: inherit;
    /*text-align: right; 
     margin-right: 17%;*/
}
#quickButton button{
    border-radius: 2rem;
    background: var(--background-color);
	border-width: 1px;
   	border-style: solid;
   	border-color: pink;
	padding-left: 10px;
    padding-right: 10px;
}
</style>
</body>
</html>